body{
//  overflow-y: hidden;
}
#wrap{
    width: 100%;
    background: #000;
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
        transition: all 3s ease-in-out;
    header{
        height: 30px;
        width: 100%;
        .content{
            width: 63%;
            min-width: 1200px;
            margin: 0 auto;
            line-height: 30px;
            a{
                color: orangered;
                float: left;
            }
            p{
                float: right;
                margin-top: 5px;
                span{
                    color: white;
                }
                a{
                    display: inline-block;
                    line-height: 20px;
                    color: white;
                    padding: 0 5px;
                    border-right: 1px solid darkgray;
                    &:hover{
                        color: orangered;
                    }
                }
            }
        }
    }
    nav{
        width: 100%;
    height:80px;
        background: #eaeaeb;  
        .content{
            width: 63%;
            min-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .logo{
                padding: 20px 0;
                float:left;
                span{
                    vertical-align: 25px;
                    display: inline-block;
                    border-left: 1px solid gray;
                    height: 40px;
                    margin-left: 20px;
                    img{
                        position: relative;
                        top: 10px;
                        left: 10px;
                    }
                }
            }
           .nav{
               width: 40%;
               float:left;
            margin-left: 16%;
               ul{
                   display: flex;
                   justify-content: space-between;
                   li{
                       line-height: 89px;
                       width: 20%;
                       text-align: center;
                       position: relative;
                       a{
                           font-size: 16px;
                           display: inline-block;
                           position: relative;
                           img{
                               position: absolute;
                               top: 20px;
                               left: 25px;
                           }
                           &:hover{
                               color: orangered;
                           }
                       }
                       div{
                           width: 100%;
                           display: none;
                           position: absolute;
                           top: 0;
                           left: 0;
                           background: white;
                           z-index: 100;
                           span,a{
                               display: block;
                           }
                           span{
                               color: gainsboro;
                               font-size: 20px;
                               cursor: pointer;
                           }
                           a{
                               font-size: 15px;
                               line-height: 2;
                               width: 100%;
                               &:hover{
                                   color: white;
                                   background: orange;
                               }
                           }
                       }
                   }
               }
           }
           .login{
               width: 20%;
               text-align: right;
               padding-top: 26px;
               float:right;
               a:nth-of-type(1){
                   display: inline-block;
                   background: orangered;
                   text-align: center;
                   width: 100px;
                   color: white;
                   line-height: 2;
                   border-radius: 5px;
                   &:hover{
                       background: orange;
                   }
               }
               a:nth-of-type(2){
                   display: inline-block;
                   text-align: center;
                   width: 50px;
                   line-height: 2;
                   color: orange;
               }
           }
        }      
    }
    .earth{
        width: 100%;
        background: url("http://s.91renqi.com/assets/4_0/img/indImg/p1-bg_02.png");
        overflow: hidden;
        .top{
            width: 100%;
            text-align: center;
            .start{
                color: gainsboro;
                line-height: 2;
                font-size: 40px;
                font-weight: normal;
                span{
                    color: #3096ff;
                    position: relative;
                }
                .left{
                    display: inline-block;
                    border-radius: 50%;
                    background: #3096FF;
                    width: 10px;
                    height: 10px;
                    top: -5px;
                }
                .left:before{
                    content: "";
                    position: absolute;
                    border-bottom: 2px solid #3096ff;
                    width: 30px;
                    top: 4px;
                    left: -30px;
                }
                .right{
                    @extend .left;
                }
                .right:before{
                    left: 10px;
                }
            }
            .middle{
                font-weight: normal;
                font-size: 60px;
                color: #3096FF;
            }
            .show{
                height: 37px;
                overflow: hidden;
            }
            .bottom{
                position:relative;
                li{
                    animation: zhuan 4s ease-out 2s infinite;


                    a{
                        font-size: 25px;
                        color: gainsboro;
                    }
                }
            }
        }
        .ball{
            width: 22%;
            min-width: 419px;
            margin: 50px auto;
            height: 500px;
            position: relative;
            background: url("http://s.91renqi.com/assets/4_0/img/indImg/dfsgdx.png") no-repeat;
            .one{
                position: absolute;
                left:-90%;
                top: 10%;
                width: 290%;
                height: 300px;
                background: url("http://s.91renqi.com/assets/4_0/img/indImg/c4.png") no-repeat;
            }
            .two{
                left: -24%;
                top: 35%;
                position: absolute;
                width: 144%;
                height: 200px;
                background: url("http://s.91renqi.com/assets/4_0/img/indImg/c1.png") no-repeat;
            }
        }
    }
}
@-webkit-keyframes zhuan {
    0% {
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1)
    }

    40% {
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04)
    }

    60% {
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98)
    }

    80% {
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02)
    }

    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
}
@keyframes star_ani_00 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes star_ani_03 {
    0%,
    100% {
        transform: translateX(0rem);
    }
    50% {
        transform: translateX(-75rem);
    }
}
@keyframes star_ani_04 {
    0%,
    100% {
        transform: translateY(0rem) scale(0.8);
    }
    50% {
        transform: translateY(18rem) scale(1);
    }
}
@keyframes star_ani_05 {
    0%,
    100% {
        transform: translateX(0rem);
    }
    50% {
        transform: translateX(-36rem);
    }
}
/*32 8*/
@keyframes star_ani_06 {
    0%,
    100% {
        transform: translateY(0rem) scale(0.8);
    }
    50% {
        transform: translateY(12rem) scale(1);
    }
}
.wrap-icon2 {
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 17.8rem;
    margin-top: 8rem;
    -webkit-animation: star_ani_00 0.5s 5s linear forwards;
    animation: star_ani_00 0.5s 5s linear forwards;
}

.wrap-icon2 span {
    width: 2.7rem;
    height: 2.7rem;
    display: block;
    -webkit-animation: star_ani_03 20s 0s ease-in-out infinite;
    animation: star_ani_03 20s 0s ease-in-out infinite;
}

.wrap-icon2 i {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    display: block;
    background: #f60;
    background-size: 100% 100%;
    -webkit-animation: star_ani_04 20s 5s ease-in-out infinite;
    animation: star_ani_04 20s 5s ease-in-out infinite;
}

.wrap-icon3 {
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 12.4rem;
    margin-top: 9rem;
    -webkit-animation: star_ani_00 0.5s 2.5s linear forwards;
    animation: star_ani_00 0.5s 2.5s linear forwards;
}
.wrap-icon {
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    left: 74%;
    top: -48%;
    z-index: 2;
    opacity: 0;
}
.wrap-iconx{
    @extend .wrap-icon;
    left:0;
    top: 0;
    left: 62%;
    top: -82%;
}
.wrap-icon3 {
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 12.4rem;
    margin-top: 9rem;
    -webkit-animation: star_ani_00 0.5s 2.5s linear forwards;
    animation: star_ani_00 0.5s 2.5s linear forwards;
}

.wrap-icon3 span {
    width: 2.7rem;
    height: 2.7rem;
    display: block;
    -webkit-animation: star_ani_05 10s 0s ease-in-out infinite;
    animation: star_ani_05 10s 0s ease-in-out infinite;
}

.wrap-icon3 i {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    display: block;
    background: #f60;
    background-size: 100% 100%;
    -webkit-animation: star_ani_06 10s 2.5s ease-in-out infinite;
    animation: star_ani_06 10s 2.5s ease-in-out infinite;
}

//侧栏
#right{
    position: fixed;
    top: 50%;
    right: 3%;
    margin-top: -100px;
    .big{
        transform: rotate(45deg);
    }
    .big{
        width: 30px;
        height: 30px;
//      border: 1px solid white;
        text-align: center;
        line-height: 30px;
        padding: 10px;
        margin-top: 20px;
//      display: none;
        cursor: pointer;
    }
    .small{
        width: 8px;
        height: 8px;
        background: gray;
        transform: rotate(90deg);
//      cursor: pointer;
    }
}
#two{
    width: 100%;
    background: url("http://s.91renqi.com/assets/4_0/img/indImg/p1-bg.jpg") no-repeat;
    .txt{
        text-align: center;
        width: 35%;
        margin: 0 auto;
        position: relative;
        top: 100px;
        h3{
            font-size: 25px;
            font-weight: normal;
        }
        h1{
            font-size: 40px;
            font-weight: normal;
            line-height: 2.5;
        }
        p{
            font-size: 20px;
            line-height: 2;
        }
    }
}
#three{
    width: 100%;
    background: url("http://s.91renqi.com/assets/4_0/img/indImg/p2-bg.jpg") no-repeat;
    .txt{
        text-align: center;
        width: 35%;
        min-width: 667px;
        margin: 0 auto;
        position: relative;
        top: 100px;
        h3{
            font-size: 25px;
            font-weight: normal;
            color: gainsboro;
        }
        h1{
            font-size: 40px;
            font-weight: normal;
            line-height: 2.5;
            color: gainsboro;
        }
        p{
            font-size: 20px;
            line-height: 2;
            color: gainsboro;
        }
    }
}
#four{
    width: 100%;
    background: url("http://s.91renqi.com/assets/4_0/img/indImg/d4-bg.jpg") no-repeat;
    .txt{
        text-align: center;
        width: 35%;
        margin: 0 auto;
        position: relative;
        top: 100px;
//      animation: swing 3s;
//      animate-iteration-count: 10;
        h3{
            font-size: 25px;
            font-weight: normal;
            color: white;
        }
        h1{
            font-size: 40px;
            font-weight: normal;
            line-height: 2.5;
            color: white;
        }
        p{
            font-size: 20px;
            line-height: 2;
            color: white;
        }
    }
}
.foot{
    width: 100%;
    height: 70px;
    background: #000000;
    line-height: 70px;
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 15;
    .content{
        width: 63%;
        margin: 0 auto;
        position: relative;
        .ma{
            position: absolute;
            left: 0;
            top: -276px;
        }
        ul{
            display: flex;
            margin-left: 250px;
            width: 70%;
            justify-content: space-between;
            li{
                a{
                    color: white;
                    font-size: 20px;
                    span{
                        font-size: 30px;
                    }
                }
            }
            li:nth-of-type(1){
                position: relative;
                top: 3px;
            }
        }
    }
    #banner{
        position: absolute;
        width: 20%;
        top: -234px;
        right: 30px;
        display: none;
        .swiper-wrapper{
            width: 100%;
            height: 100%;
            .swiper-slide{
                display: flex;
                text-align:center;
                align-items: center;
                img{
//                  width: 100%;
                    margin: 0 auto;
                }
            }
        }
    }
}
#phone{
    background: url("../img/iphone72.png") no-repeat;
    position: fixed;
    width: 31%;
    height: 290px;
    min-width: 590px;
    left: 50%;
    margin-left: -295px;
    bottom: 18%;
    padding: 13px 67px;
    padding-left: 78px;
    display: none;
    .show{
        width: 100%;
        height: 100%;
        overflow: hidden;
        .main{
            position: relative;
            .mu,.last{
                width: 100%;
                height: 264px;
            img{
                width: 100%;
                height: 264px;
                }
            }
            .last{
                background-color: black;
                display: flex;
                .left{
                    width: 48%;
                    background: url("../img/d4-bottombgsm2.png") no-repeat;
                    background-size:100% 100% ;
                    position: relative;
                    .title{
                        position: absolute;
                        right: 0;
                        top: 0;
                        img{
                            width: 82px;
                            height: 75px;
                        }
                    }
                    .lianjie{
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        img:nth-of-type(1){
                            width: 120px;
                            height: 100px;
                            position: relative;
                            top: 50%;
                            margin-top: -50px;
                            transition: all 0.5s ease-in;
                            &:hover{
                                width: 132px;
                                height: 112px;
                            }
                        }
                        a{
                            display: inline-block;
                            width: 120px;
                            height: 40px;
                            background: url("../img/d4-btnsm.png") no-repeat;
                            position: absolute;
                            bottom: 10%;
                            left: 50%;
                            margin-left: -60px;
                            &:hover{
                                background: url("../img/d4-btnhoversm.png") no-repeat;
                            }
                        }
                    }
                }
                .right{
                    @extend .left;
                    margin-left: 4%;
                }
            }
        }
        
    }
}
.mengban{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
//  display: none;
    #banner1{
        @extend #banner;    
        width: 35%;
        height: 50%;
        margin: auto;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        img{
            width: 100%;
        }
        .close{
            color: white;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: orange;
            position: absolute;
            right: 0;
            border-radius: 50%;
            z-index: 10;
            cursor: pointer;
        }
    }
}
